<script lang="ts" setup>
import {computed, ref, Ref} from "vue";
import BHeader from "../../components/header/bHeader.vue";
import {goManage,goUserManagementEditing} from "../../tools/go"
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import UniEasyinput from "../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import {getUserRole} from "../../api/user/userRole";
import {toast} from "../../components/popup/popup";
import {set, get} from "../../store"


interface userRole {
  userId: number;
  userNick: string;
  roleId: Record<string, unknown>[];
  roleName: Record<string, unknown>[];
  status: number;
  time: string;
}

const showSearch = ref(false);
const searchKey = ref("");
const selectedMethod = ref("");
const isRefreshing = ref(false);



const filteredUserRole = computed(() : userRole[] => {
  return userList.value.filter((api) => {
    return !searchKey.value ||
        api.userNick.toLowerCase().includes(searchKey.value.toLowerCase())
  });
});

const getMethodColor = (method: string) => {
  const colors = {
    GET: "#67C23A",
    POST: "#409EFF",
    PUT: "#E6A23C",
    DELETE: "#F56C6C",
    PATCH: "#909399",
  };
  return colors[method as keyof typeof colors] || "#909399";
};

const handleSearch = () => {
  showSearch.value = !showSearch.value;
};

const handleAdd = () => {
  toast("新增API","none")
};

const handleMethodFilter = (method: string) => {
  selectedMethod.value = selectedMethod.value === method ? "" : method;
};

const handleApiDetail = (user) => {
  set("userManagementEditing", user)
  goUserManagementEditing(user.userId)
};

const loadMore = () => {
  //@ts-ignore
  toast(`加载更多`,"none")
};

const userList:Ref<userRole[]> = ref([])

const goBack = () => {
  goManage()
}

const UserPage = {
  page: 1,
  size: 10,
  total: 0,
}

let pageSy = 0
let pageEy = 0

const sorllS = (val) => {
  pageSy = val.touches[0].pageY
}

const sorllMove = (val) => {
  pageEy = val.touches[0].pageY
}

const APIAdd = () => {
  if (pageSy - pageEy > 200 && (UserPage.page * UserPage.size)< UserPage.total) {
    UserPage.page++
    return  getUserRole(UserPage.page, UserPage.size).then(
        res => {
          userList.value.push(...res.data.records)
        }
    )
  }

}

const API = () => {
  getUserRole(UserPage.page, UserPage.size).then(res => {
    console.log(res)
    userList.value = res.data.records
    UserPage.total = res.data.total
  })
}

const init = () => {
  API()
}

init()
</script>

<template>
  <view class="back">
    <view class="container">
      <!-- 顶部导航栏 -->
      <b-header title="用户管理" :go="goBack">
        <view class="header-actions">
          <uni-icons
              @click="handleSearch"
              type="search"
              size="22"
              color="#333333"
          ></uni-icons>
          <uni-button
              class="add-btn"
              @click="handleAdd"
              type="primary"
              size="mini"
          >新增</uni-button
          >
        </view>
      </b-header>
      <!-- 搜索过滤区 -->
      <view class="search-area" v-show="showSearch">
        <view class="search-input">
          <uni-easyinput
              v-model="searchKey"
              placeholder="搜索用户名称"
          ></uni-easyinput>
        </view>
      </view>

      <!-- API列表区域 -->
      <scroll-view
          class="api-list"
          :scroll-y="true"
          @scrolltolower="loadMore"
          :refresher-triggered="isRefreshing"
          @touchstart="sorllS"
          @touchend="APIAdd"
          @touchmove="sorllMove"
      >
        <view
            class="api-card"
            v-for="user in filteredUserRole"
            :key="user.userId"
            @click="handleApiDetail(user)"
        >
          <view class="api-header">
            <text class="api-name">{{ user.userNick }}</text>
            <text
                class="api-status"
                :class="user.status === 1 ? 'status-online' : 'status-offline'"
            >
              {{ user.status === 1 ? "启用" : "禁用" }}
            </text>
          </view>
          <view class="api-content">
            <view
                class="method-tag"
                :style="{ backgroundColor: getMethodColor('GET') }"
            >
              {{ user.roleName[0] }}
            </view>
            <view class="api-path" >{{ user.roleName }}</view>
          </view>
          <view class="api-footer">
            <text class="api-desc">暂无</text>
            <text class="api-time">最后更新: {{ user.time }}</text>
          </view>
          <uni-icons
              class="arrow-icon"
              type="right"
              size="16"
              color="#CCCCCC"
          ></uni-icons>
        </view>
      </scroll-view>

      <text class="null">已经滑倒最底下了</text>

    </view>
  </view>
</template>

<style scoped lang="scss">
@use "../../static/css/main";
.back {
  @include main.useTheme(){
    .container {
      .null{
        text-align: center;
        padding-bottom: 100rpx;
        color: #909399;
      }
      .api-list {
        .api-card {
          .status-online {
            background-color: #f0f9eb;
            color: #67c23a;
          }

          .status-offline {
            background-color: #f4f4f5;
            color: #909399;
          }

          .api-footer {
            .api-desc {
              font-size: 26rpx;
              color: #909399;
            }

            .api-time {
              font-size: 24rpx;
              color: #c0c4cc;
            }
            display: flex;
            flex-direction: column;
            gap: 10rpx;
          }

          .arrow-icon {
            position: absolute;
            right: 40rpx;
            top: 50%;
            transform: translateY(-50%);
          }

          .api-content {

            .api-path {
              font-family: monospace;
              background-color: main.getVal("one_lv_bg_color");
              padding: 10rpx 20rpx;
              border-radius: 6px;
              font-size: 28rpx;
              color: main.getVal("two_lv_text_color");
              flex: 1;
              word-break: break-all;
            }
            display: flex;
            align-items: center;
            gap: 20rpx;
            margin-bottom: 20rpx;
          }

          .api-header {
            .api-name {
              font-size: 32rpx;
              font-weight: bold;
              color: main.getVal("primary_text_color");
            }

            .api-status {
              font-size: 24rpx;
              padding: 4rpx 16rpx;
              border-radius: 20rpx;
            }
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;
          }
          background-color: main.getVal("primary_bg_color");
          border-radius: 16rpx;
          padding: 30rpx;
          margin-bottom: 20rpx;
          position: relative;
        }
        flex: 1;
        overflow: auto;
        padding: 20rpx;
      }

      .search-area {
        .method-filter {
          display: flex;
          flex-wrap: wrap;
          gap: 20rpx;
        }

        .search-input {
          margin-bottom: 20rpx;
        }
        padding: 20rpx 30rpx;
        background-color: main.getVal("primary_bg_color");
        border-bottom: 1px solid main.getVal("primary_border_color");
        flex-shrink: 0;
      }

      .method-tag {
        padding: 10rpx 20rpx;
        border-radius: 6px;
        color: #ffffff;
        font-size: 24rpx;
        font-weight: bold;
      }

      .method-tag-active {
        opacity: 0.8;
        transform: scale(0.95);
      }

      .header-actions {
        .add-btn {
          margin: 0;
        }
        display: flex;
        align-items: center;
        gap: 30rpx;
      }

      min-height: 100vh;
      height: 100%;
      display: flex;
      flex-direction: column;
      background-color: main.getVal("two_lv_bg_color");
    }
  }
}
</style>
